<template>
  <div class="media" v-model="$store.state.mediaState">
    <p class="media_tit">{{ videoTit }}</p>
    <div class="media_bar">
      <mt-range v-model="barWidth" :bar-height="1">
        <div class="media_start" slot="start">{{format(rangeValue)}}</div>
        <div class="media_end" slot="end">{{ format(duration) }}</div>
      </mt-range>
    </div>
    <div class="media_action">
      <div class="media_btn media_btn_playlist" @click="showPlayList"><img src="./img/play_list.png" alt=""><span>{{$t('m.playList')}}</span></div>
      <div class="media_mid">
        <div class="media_btn_play">
          <span class="media_btn_prev" @click="prev"></span>
          <span :class="[{'on':isPlay},'media_btn_main']" @click="musicPlay"></span>
          <span class="media_btn_next" @click="next"></span>
        </div>
      </div>
      <div class="media_btn media_btn_download"><img src="./img/play_download.png" alt=""><span>{{$t('m.down')}}</span></div>
    </div>
    <div class="play_list_bg" v-if="showList"></div>
    <transition name="fade">
      <div class="play_list" v-if="showList">
        <p class="play_list_tit">{{$t('m.playList')}}</p>
        <div class="play_list_scroll">
          <div class="null" v-if="playList.length==0"><img src="../../../static/img/null.png" alt=""><p>暂无数据！</p></div>
          <ul class="play_list_item">
            <li :class="[curPlay===index?'on':'','clearfix']" v-for="(item,index) in playList" @click="playThis(item,index)">
              <img src="./img/play_icon.png" alt="">
              <span>{{ item.name }}</span>
              <i>{{ item.duration }}</i>
            </li>
          </ul>
        </div>
        <p class="play_list_close" @click="closeList">{{$t('m.close')}}</p>
      </div>
    </transition>
    <audio :src="mediaSrc" id="audio" controls ref='player' @canplay="ready" @timeupdate="updateTime" preload
    style="opacity: 0;width: 0;height: 0;"></audio>
  </div>
</template>

<script type="text/ecmascript-6">
    export default {
      name:'media',
      props:['videoTit','mediaSrc'],
      data(){
        return{
          rangeValue:0,
          showList:false,
          isPlay:false,
          duration:0,
          barWidth:0,
          curPlay:-1,
          playList:[],
        }
      },
      methods:{
        showPlayList(){
          this.showList=true;
          this.playList = JSON.parse(localStorage.getItem('playList'))?JSON.parse(localStorage.getItem('playList')):[];
        },
        closeList(){
          this.showList=false;
        },
        musicPlay(){
          if ( this.isPlay ) {
            this.$refs.player.pause();
          }else{
            this.$refs.player.play();
          }
          this.isPlay = !this.isPlay;
          if(localStorage.getItem('autoplay') != 1) {
            this.$store.state.playList.push({
              'name': this.videoTit,
              'src': this.mediaSrc,
              'duration': this.format(this.duration),
              'id':this.$route.query.id
            });
            localStorage.setItem('playList', JSON.stringify(this.deleteRepeat(this.$store.state.playList, 'name')));
            this.$store.state.playList = JSON.parse(localStorage.getItem('playList'));
            this.setNowPlay();
          }
        },
        updateTime(e){
          this.rangeValue = e.target.currentTime;
          this.barWidth = this.rangeValue/this.duration*100;
          if (this.barWidth==100){
            this.isPlay = false;
          }
        },
        ready(e){
          this.duration = e.target.duration;
          if(localStorage.getItem('autoplay') == 1){
            this.$store.state.playList.push({
              'name': this.videoTit,
              'src': this.mediaSrc,
              'duration': this.format(this.duration),
              'id':this.$route.query.id
            });
            localStorage.setItem('playList',JSON.stringify(this.deleteRepeat(this.$store.state.playList,'name')));
            this.$store.state.playList = JSON.parse(localStorage.getItem('playList'));
            this.setNowPlay();
          }
        },
        format(interval) {
          interval = interval | 0;
          const minute = interval / 60 | 0;
          const second = this._pad(interval % 60);
          return `${minute}:${second}`;
        },
        _pad(num, n = 2) {
          let len = num.toString().length
          while (len < n) {
            num = '0' + num;
            len++;
          }
          return num
        },
        deleteRepeat(arr,name){
          let hash = {};
          return arr.reduce(function (item, next) {
            hash[next[name]] ? '' : hash[next[name]] = true && item.push(next);
            return item;
          }, []);
        },
        setNowPlay(){
          let pl = JSON.parse(localStorage.getItem('playList'));
          if(!pl){
            return false
          }
          for (let i =0;i<pl.length;i++){
            if (this.$route.query.id == pl[i].id){
              this.curPlay = i;
            }
          }
        },
        playThis(i,index){
          this.curPlay = index;
          this.$emit('playthissong',(i.id),index);
          this.showList=false;
        },
        prev(){
          this.curPlay--;
          let pl = JSON.parse(localStorage.getItem('playList'));
          if(!pl){
            return false
          }
          if ( this.curPlay<0 ){
            this.curPlay = pl.length-1;
          }
          this.$emit('playthissong',pl[this.curPlay].id,this.curPlay);
        },
        next(){
          this.curPlay++;
          let pl = JSON.parse(localStorage.getItem('playList'));
          if(!pl){
            return false
          }
          if ( this.curPlay>=pl.length ){
            this.curPlay = 0;
          }
          this.$emit('playthissong',pl[this.curPlay].id,this.curPlay);
        }
      },
      watch:{
        mediaSrc(val,oldval){
          this.$nextTick(()=>{
            if(localStorage.getItem('autoplay') == 1){
              this.$refs.player.play();
            }
          })
        }
      },
      created(){
        this.setNowPlay();
        if(localStorage.getItem('autoplay') == 1){
          this.isPlay = true;
        }
      }
    };
</script>

<style scoped="scoped" >
  .media{height: 1.1rem;box-shadow: 0 -1px 2px 0 rgba(0,0,0,0.10);padding: 0 0.16rem;position: fixed;width: 100%;left: 0;bottom: 0;background: #fff;z-index: 60;}
  .media_tit{text-align: center;font-size: 0.12rem;color: #333;padding-top: 8px}
  .media_start,.media_end{font-size: 0.1rem;color: #FFBF44;position: absolute;top: 0.18rem;}
  .media_end{right: 0}
  .media_action{position: relative;text-align: center;}
  .media_btn{font-size: 0.1rem;color: #999;text-align: center;position: absolute;top: 50%;margin-top: -0.26rem;}
  .media_btn img{width: 0.18rem;}
  .media_btn span{display: block;margin-top: 3px;}
  .media_btn_playlist{left: 0;}
  .media_btn_download{right: 0;}
  .media_mid{display: inline-block;vertical-align: top;}
  .media_btn_play{-webkit-display: flex;display: flex;-webkit-align-items: center;align-items: center;}
  .media_btn_prev,.media_btn_next{width: 0.13rem;height: 0.2rem;}
  .media_btn_prev{background: url("./img/play_prev.png") center center no-repeat;background-size: 100% auto;}
  .media_btn_next{background: url("./img/play_next.png") center center no-repeat;background-size: 100% auto;}
  .media_btn_main{width: 0.93rem;height: 0.74rem;background: url("./img/play_start.png");background-size: 100% auto;}
  .media_btn_main.on{background: url("./img/play_stop.png");background-size: 100% auto;}
  .play_list_bg{position: fixed;width: 100%;background: rgba(0,0,0,0.5);height: 100%;z-index: 59;left: 0;top: 0;}
  .play_list{position: fixed;width: 100%;background: #fff;height: 70vh;z-index: 60;left: 0;bottom: 0;padding: 0.5rem 0 0.45rem}
  .play_list_tit{height: 0.5rem;line-height: 0.5rem;font-size: 0.16rem;color: #333;font-weight: bold;border-bottom: 1px solid #f7f7f7;margin-top: -0.5rem;padding-left: 0.15rem}
  .play_list_close{height: 0.45rem;line-height: 0.45rem;color: #333;text-align: center;font-size: 0.16rem;border-top: 1px solid #f7f7f7;}
  .play_list_scroll{height: 100%;overflow: auto;padding-left: 0.15rem;}
  .play_list_item li{border-bottom: 1px solid #f7f7f7;height: 0.45rem;line-height: 0.45rem;font-size: 0.14rem;color: #666;padding: 0 0.15rem 0 0;}
  .play_list_item li.on img{display: inline-block}
  .play_list_item li:before{content: '';display: inline-block;vertical-align: middle;width: 0;height: 100%;}
  .play_list_item li span{display: inline-block;max-width: 80%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;vertical-align: middle}
  .play_list_item li i{float: right;font-style: normal}
  .play_list_item li img{display: inline-block;vertical-align: middle;margin-right: 0.1rem;display: none;width: 0.14rem;}
</style>
